<template>
  <v-col>
    <v-row justify="center">
      <v-col>
        <v-card>
          <v-toolbar color="primary" flat>
            <v-toolbar-title>
              Login Form
            </v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-text-field prepend-icon="mdi-account" v-model="username"/>
            <v-text-field prepend-icon="mdi-security" type="password" v-model="password"/>
          </v-card-text>
          <v-card-actions class="d-flex flex-row">
            <!--            <v-btn text @click="checkOut">Check Out</v-btn>-->
            <v-btn text @click="reset">Reset</v-btn>
            <v-btn text @click="doLogin">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-col>
</template>

<script>
export default {
  name: "Login",
  data: () => ({
    username: '',
    password: '',
  }),
  methods: {
    doLogin() {
      let loginData = {
        username: this.username,
        password: this.password
      }
      this.axios.post('/login',loginData).then((resp) => {
        let code=resp.data.code;
        if(code===200){
          let data=resp.data;
          let token=data.token;
          let user=data.user;
          //存储token
          this.$store.commit('SET_TOKEN', token);
          //存储user，优雅一点的做法是token和user分开获取
          this.$store.commit('SET_USER', user);
          console.log(this.$store.state.token);
          this.$router.push('/welcome')
        }
      })
    },
    reset() {
      this.username = '';
      this.password = '';
    },
    checkOut() {
      alert(this.username + '---' + this.password)
    }
  }
}
</script>

<style scoped>

</style>